<template>
  <div id="builder"></div>
</template>

<script lang="ts" setup>
import { FormBuilder } from "formiojs";
import "formiojs/dist/formio.full.min.css";
import ch from "@/translations/zhCN";
import data from "../render/json-demo/data.json";
import { onMounted } from "vue";

onMounted(() => {
  console.log("FormBuilder", data);
  new FormBuilder(document.getElementById("builder"),"https://examples.form.io/example" , {
    language: "ch",
    i18n: {
      ch
    },
    disabled: ['email']
  }).build().then((instance) => {
    console.log(instance);
    instance.language = "ch";
    const onBuild = function() {
      console.log(JSON.stringify(instance.schema, null, 4));
    };

    const onReady = function() {
      instance.on("change", onBuild);
    };

    instance.ready.then(onReady);
  });

});

</script>
